class SubmitFeedbackView extends React.Component {
    constructor(props) {
        super(props);
        this.layuiCallback = this.layuiCallback.bind(this);
        this.uploadBefore = this.uploadBefore.bind(this);
        this.uploadSuccess = this.uploadSuccess.bind(this);
        this.imageMap = new UtilMap();
        this.index = 0;
        this.state = {
            checked: false,
            img1: '/pic/upload_ioc.png',
            img2: '/pic/upload_ioc.png',
            img3: '/pic/upload_ioc.png',
            img4: '/pic/upload_ioc.png',
        };
    }

    layuiCallback() {
        this.layer = layui.layer;
        // noinspection ES6ModulesDependencies
        this.form = layui.form();
        //自定义验证规则
        this.form.verify({
            phone: function (value) {
                if (value.length !== 11) {
                    return '联系电话必须填写!';
                }
            },
            title: function (value) {
                if (value.length < 2) {
                    return '标题最少两个字符!';
                }
            },
            textarea: function (value) {
                if (value.length < 5) {
                    return '内容至少得5个字符!';
                }
            }
        });

        this.form.on('checkbox(phone_checkbox)', function (data) {
            if (data.elem.checked) {
                postJson('/feedback/queryUserPhone.x', null,//传递的参数
                    function (data) { //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                        console.log(data);
                        if (data.data) {
                            this.refs.phone.value = data.data;
                        } else {
                            this.setState({
                                checked: false
                            }, function () {
                                this.form.render('checkbox');
                            }.bind(this));
                            this.layer.msg('你还没有绑定手机号！', {icon: 5});
                        }
                    }.bind(this),
                    function (data) {
                        this.setState({
                            checked: false
                        }, function () {
                            this.form.render('checkbox');
                        }.bind(this));
                        this.layer.msg('你还没有绑定手机号！', {icon: 5});
                    }.bind(this)
                );
            } else {
                this.refs.phone.value = '';
            }

        }.bind(this));

        this.form.on('submit(submit)', function () {
            let urls = JSON.stringify(this.imageMap.getAllValue());
            let params = {
                title: this.refs.title.value,
                content: this.refs.content.value,
                urls: urls,
                phone: this.refs.phone.value
            };
            postJson(
                '/feedback/save.x', //服务器要接受的url
                $.param(params),//传递的参数
                function (datas) { //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                    this.imageMap.removeAll();
                    this.refs.title.value = '';
                    this.refs.content.value = '';
                    this.setState({
                        title: '',
                        content: '',
                        img1: '/pic/upload_ioc.png',
                        img2: '/pic/upload_ioc.png',
                        img3: '/pic/upload_ioc.png',
                        img4: '/pic/upload_ioc.png',
                    });
                    this.layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
                }.bind(this)
            );
            return false;
        }.bind(this));

        layui.upload({
            url: '/cms/resource/uploadFile.x?isTemp=' + true,
            unwrap: true,
            before: this.uploadBefore,
            success: this.uploadSuccess
        });
    }

    componentDidMount() {
        layui.use(['form', 'laypage', 'upload'], this.layuiCallback);
    }

    uploadBefore() {
        this.layer.load(2);
    }

    uploadSuccess(res) {
        switch (this.index) {
            case 1:
                this.setState({
                    img1: res.data.imageUrl
                });
                break;
            case 2:
                this.setState({
                    img2: res.data.imageUrl
                });
                break;
            case 3:
                this.setState({
                    img3: res.data.imageUrl
                });
                break;
            case 4:
                this.setState({
                    img4: res.data.imageUrl
                });
                break;
        }
        this.imageMap.put('img' + this.index, res.data.imagePath);
        this.layer.closeAll('loading');
    }

    uploadImage(i) {
        this.index = i;
        let fileInput = ReactDOM.findDOMNode(this.refs.fileInput);
        fileInput.click();
    }

    deleteImage(i) {
        switch (i) {
            case 1:
                this.setState({
                    img1: '/pic/upload_ioc.png'
                });
                break;
            case 2:
                this.setState({
                    img2: '/pic/upload_ioc.png'
                });
                break;
            case 3:
                this.setState({
                    img3: '/pic/upload_ioc.png'
                });
                break;
            case 4:
                this.setState({
                    img4: '/pic/upload_ioc.png'
                });
                break;
        }
        this.imageMap.remove('img' + i);
    }

    render() {
        return <div className="box box-primary">
            <div className="box-frame">
                <form className="layui-form layui-form-pane">

                    <div className="layui-form-item">
                        <label className="layui-form-label">联系电话</label>
                        <div className="layui-input-inline">
                            <input type="text" name="phone" id="phone" ref="phone"
                                   autoComplete="off"
                                   placeholder="请输入联系电话"
                                   className="layui-input" data-verify="phone"/>
                        </div>

                        <input type="checkbox" ref="phone_checkbox" data-filter="phone_checkbox" title="使用当前用户绑定的电话号码"
                               data-skin="primary" checked={this.state.checked}/>
                    </div>

                    <div className="layui-form-item">
                        <label className="layui-form-label">反馈标题</label>
                        <div className="layui-input-block">
                            <input type="text" name="title" id="title" ref="title" autoComplete="off"
                                   placeholder="请输入标题"
                                   className="layui-input" data-verify="title"/>
                        </div>
                    </div>

                    <div className="layui-form-item layui-form-text">
                        <label className="layui-form-label">反馈内容</label>
                        <div className="layui-input-block">
                            <textarea ref="content" id="content" name="content" placeholder="请输入反馈内容"
                                      className="layui-textarea" data-verify="textarea"/>
                        </div>
                    </div>

                    <div style={divStyle}>
                        <div style={divItemStyle}>
                            <div className="Center-Container" style={divImgStyle}>
                                <img className="Absolute-Center" style={imgStyle} src={this.state.img1}/>
                            </div>
                            <hr/>
                            <div style={{'text-align': 'center', margin: '0 auto'}}>
                                <button type="button" className="layui-btn layui-btn-danger layui-btn-small"
                                        onClick={() => this.deleteImage(1)}>
                                    删除图片
                                </button>
                                <button type="button" className="layui-btn layui-btn-small"
                                        onClick={() => this.uploadImage(1)}>上传图片
                                </button>
                            </div>
                        </div>
                        <div style={divItemStyle}>
                            <div className="Center-Container" style={divImgStyle}>
                                <img className="Absolute-Center" style={imgStyle} src={this.state.img2}/>
                            </div>
                            <hr/>
                            <div style={{'text-align': 'center', margin: '0 auto'}}>
                                <button type="button" className="layui-btn layui-btn-danger layui-btn-small"
                                        onClick={() => this.deleteImage(2)}>
                                    删除图片
                                </button>
                                <button type="button" className="layui-btn layui-btn-small"
                                        onClick={() => this.uploadImage(2)}>上传图片
                                </button>
                            </div>
                        </div>
                        <div style={divItemStyle}>
                            <div className="Center-Container" style={divImgStyle}>
                                <img className="Absolute-Center" style={imgStyle} src={this.state.img3}/>
                            </div>
                            <hr/>
                            <div style={{'text-align': 'center', margin: '0 auto'}}>
                                <button type="button" className="layui-btn layui-btn-danger layui-btn-small"
                                        onClick={() => this.deleteImage(3)}>
                                    删除图片
                                </button>
                                <button type="button" className="layui-btn layui-btn-small"
                                        onClick={() => this.uploadImage(3)}>上传图片
                                </button>
                            </div>
                        </div>
                        <div style={divItemStyle}>
                            <div className="Center-Container" style={divImgStyle}>
                                <img className="Absolute-Center" style={imgStyle} src={this.state.img4}/>
                            </div>
                            <hr/>
                            <div style={{'text-align': 'center', margin: '0 auto'}}>
                                <button type="button" className="layui-btn layui-btn-danger layui-btn-small"
                                        onClick={() => this.deleteImage(4)}>
                                    删除图片
                                </button>
                                <button type="button" className="layui-btn layui-btn-small"
                                        onClick={() => this.uploadImage(4)}>上传图片
                                </button>
                            </div>
                        </div>

                        <div style={{font: '0px/0px sans-serif', clear: 'both', display: 'block'}}/>
                    </div>
                    <input type="file" className="layui-upload-file" style={{display: 'none', opacity: 0}} id="file"
                           name="file" ref="fileInput"/>
                    <div className="layui-form-item">
                        <button className="layui-btn" style={{marginTop: '20px'}} data-submit data-filter="submit">
                            提交反馈
                        </button>
                    </div>
                </form>
            </div>
        </div>
    }
}

let divStyle = {
    border: '1px solid #EDEDED',
    paddingTop: '10px',
    paddingBottom: '10px'
};

let divItemStyle = {
    border: '1px solid #CDCDC1',
    float: 'left',
    padding: '5px',
    width: '180px',
    height: '270px',
    marginLeft: '10px'
};

let divImgStyle = {
    width: '100%',
    height: '210px'
};

let imgStyle = {
    'max-height': '100%',
    'max-width': '100%'
};

ReactDOM.render(
    <SubmitFeedbackView/>
    ,
    document.getElementById('example')
);